<template>
    <div>

        <!-- 条件查询 -->
         <el-row>
          <el-col :span="24"><div class="grid-content bg-purple-dark">
                <el-form :inline="true" :model="searchData" clearable class="demo-form-inline">
                    <el-form-item label="省">         
                      <el-select v-model="searchData.province" placeholder="请选择" @change="upCity">
                        <el-option
                          v-for="item in Province"
                          :key="item.id"
                          :label="item.gname"
                          :value="item.id">
                        </el-option>
                      </el-select>
            
                    </el-form-item>

                    <el-form-item label="市">         
                      <el-select v-model="searchData.city" placeholder="请选择">
                        <el-option
                          v-for="item in city"
                          :key="item.id"
                          :label="item.gname"
                          :value="item.id">
                        </el-option>
                      </el-select>

                    </el-form-item>


                    <el-form-item label="操作时间">

                    <div class="block">
                        <el-date-picker
                          v-model="DateQuery"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          unlink-panels
                          value-format="yyyy-MM-dd">
                        </el-date-picker>
                      </div>

                    </el-form-item>


                    <el-form-item label="商品名称">
                    <el-input v-model="searchData.goodsName" clearable></el-input>
                    </el-form-item>

                    <!-- <el-form-item label="代理商">
                    <el-input v-model="searchData.agent" clearable></el-input>
                    </el-form-item> -->

                    <el-form-item label="代理商">
                   <el-select
                     v-model="value"
                     multiple
                     filterable
                     remote
                     reserve-keyword
                     placeholder="请输入关键词"
                     :remote-method="remoteMethod"
                     :loading="loading">
                     <el-option
                       v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
                     </el-option>
                   </el-select>
                    </el-form-item>


                    <el-button type="primary" @click="search">查询</el-button>
                </el-form>
              </div></el-col>
        </el-row>


        <!-- 表格展示 -->
        <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-dark">
                <el-table :data="goodsList" height="550" border>

                 <!-- 批量 -->
                 <el-table-column  type="selection" width="55"></el-table-column>   

                <el-table-column  fixed prop="sheng" label="省" width="80"></el-table-column>
                <el-table-column  fixed prop="shi" label="市" width="80"></el-table-column>
                <el-table-column  fixed prop="agent" label="代理商" ></el-table-column>
                <el-table-column  fixed prop="goodsName" label="商品名称" >
                    <template slot-scope="scope">
                          <div @click="getGoods(scope.row)">{{ scope.row.goodsName }}</div>
                        </template>

                </el-table-column>
                <el-table-column  label="金额" header-align="right">                  
                        <template slot-scope="scope">
                          <div :style="{ textAlign: 'right' }">{{ scope.row.amount }}</div>
                        </template>
                    </el-table-column>              
                <el-table-column prop="state" label="状态" width="80" header-align="center">
                    <template slot-scope="scope">
                        <div :style="{ textAlign: 'center' }">
                            <el-tag v-if="scope.row.state=='0'" type="success">上架</el-tag>
                            <el-tag v-else type="danger">下架</el-tag>
                        </div>
                        
                    </template>
                </el-table-column>
                <el-table-column  label="操作时间" width="180" header-align="center">
                   <template slot-scope="scope">
                     <div :style="{ textAlign: 'center' }">{{ scope.row.operatingTime }}</div>
                   </template>

                </el-table-column>
                <el-table-column prop="operator" label="操作人" style="text-align: left;"></el-table-column>
                <el-table-column label="操作" width="200" >
                    <template slot-scope="scope">
                        <el-button size="small" @click="addGoods(scope.row)" plain>新增</el-button>
                        <el-button size="small" type="danger" @click="delGoods(scope.row)" plain >删除</el-button>                       
                    </template>
                </el-table-column>
                </el-table>

                </div>
            </el-col>
        </el-row>


    </div>
</template>

<script>
import axios from 'axios';

export default {
    data(){
        return{
            goodsList:[],
            Province:[],
            city:[],
            DateQuery:[],//时间查询
            searchData:{
                "province": "",
                "city": "",
                "goodsName":"",
                "startDate":"" ,
                "endDate": "",
                "agent":""
            },
            options: [],
            value: [],
            list: [],
            loading: false,
            states: []
        }
    },
    created(){
        this.initTable();
        this.initProvince();
    },
   
    methods:{
        //回显
        getGoods(row){
            //跳页面并带id
            sessionStorage.setItem("id",row.id);
              this.$router.push("/mm")
        },

        //新增
        addGoods(){
            this.$router.push('/mm')
        },
        //删除
        delGoods(row){
            axios.delete('/api/goods/deleteTbGoods?id='+row.id).then(res=>{
                //弹框
                this.$message({
                     message: res.data.message,
                     type: 'success'
                   });
                   this.initTable()//刷新表格
            })
        },
        //列表
        initTable(){
            axios.post("/api/goods/findTbGoodsList", this.searchData).then(res=>{
                this.goodsList = res.data.data;
                this.states = res.data.data.map(item => item.agent)
                console.log( this.states);
                this.list = this.states.map(item => {
                  return { value: item, label: item };
                });
                
            })
        },
        //条查
        search(){
                console.log(this.DateQuery);
                this.searchData.startDate = this.DateQuery[0]; //开始时间赋值给时间数组0下标
                this.searchData.endDate = this.DateQuery[1]//结束时间赋值给时间数组0下标

               this.value.reduce((pre, cur) => {
                   this.searchData.agent = cur
                   return cur
                 }, '')
               console.log('jdwqdiuhqie',this.searchData.agent);
               

                this.initTable();
        },
        //区域
        initProvince(){
            axios.get("/api/goods/findProvinceList",).then(res=>{
                this.Province = res.data.data
            })
        },
        upCity(val){
            this.initcity(val)
        },
        initcity(val){
            axios.get("/api/goods/findCityList?id="+val).then(res=>{
                this.city = res.data.data
            })
        },

        remoteMethod(query) {
            if (query !== '') {
              this.loading = true;
              setTimeout(() => {
                this.loading = false;
                this.options = this.list.filter(item => {
                  return item.label.toLowerCase()
                    .indexOf(query.toLowerCase()) > -1;
                });
              }, 200);
            } else {
              this.options = [];
            }
          }
       
    }
}
</script>
<style scoped>

</style>